<style  scoped="">
    @import "../../utils/base.scss";
    .list-body{
        width: 30%;
        height: 200px;
        font-size: 14px;
        border: 1px solid #dcdae2;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }
    .list-header{
        padding: 8px 16px;
        background: #f9fafc;
        color: #515a6e;
        overflow: hidden;
        top: 0;
        left: 0;
        width: 100%;
    }
    .transfer-list {
        line-height: 1.5;
        display: inline-block;
        width:  15.2vw;
        height: 400px;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        padding-top: 35px;
    }
    .transfer-list-header{
        padding: 8px 16px;
        background: #f9fafc;
        color: #515a6e;
        border: 1px solid #dcdee2;
        border-bottom: 1px solid #e8eaec;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .transfer-list-body{
        height: 100%;
        border: 1px solid #dcdee2;
        border-top: none;
        border-radius: 0 0 6px 6px;
        position: relative;
        overflow: hidden;
    }
    .transfer-operation {
        display: inline-block;
        margin: 0 16px;
        vertical-align: middle;
    }
    .transfer-list-body-with-search{
        padding-top: 34px;
    }
    .transfer-list-body-content{
        padding: 6px 0 0;
        height: 75%;
        padding: 4px 0;
        overflow: auto;
    }
    .transfer-list-content-item:hover {
        background: #f3f3f3;
    }
    .transfer-list-content-not-found{
        display: block;
        text-align: center;
        color: #c5c8ce;
    }
    .transfer-list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 14px !important;
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }

    .my-th{
      width:10vw;
      padding-left:10px;
    }

    .my-td{
      width:20vw;
      padding-left:10px;
    }
</style>
<template>
    <div style="background-color: #ffffff;padding: 20px 50px;">
        <table border="1px" class="tale" align="center" style="width:100%;">
            <tr align="center" style="height: 3vw">
                <th class="my-th">租户名字</th>
                <td class="my-td">{{ row.tenant_name }}</td>
                <th class="my-th">租户描述</th>
                <td class="my-td">{{ row.des }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">租户运营人员</th>
                <td class="my-td">{{ row.business }}</td>
                <th class="my-th">租户下的项目</th>
                <td class="my-td">{{ projects }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">租户下的用户</th>
                <td colspan="3" style="padding:10px;">
                    <div class="list-body" >
                        <div class="list-header" style="height: 50px">
                            <Input style="margin: 0 !important;float: left;width: 65%" height="50" clearable search v-model="search" @keydown.enter.native.prevent @on-search="searchUser" @on-clear="onClear" placeholder="搜索人员名称">
                            </Input>
                            <span style="margin: 0 !important;float: right;">{{"共 "+users.length+" 人" }}</span>
                        </div>
                        <ul class="transfer-list-body-content">
                            <template v-if="users.length > 0">
                                    <template v-for="item in users">
                                        <li class="transfer-list-content-item">
                                            <span style="margin-left: 8px">{{item.user_name}}</span>
                                        </li>
                                    </template>
                            </template>
                            <li v-else class="transfer-list-content-not-found">列表为空</li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                search:"",
                usersTepm:this.row.users,
                users:this.row.users
            }
        },
        mounted(){
            //console.log("------projcets-----",this.row);
        },
        props: {
            row: Object,
            projects: String
        },
        methods:{
            searchUser(value){
                if(value != ''){
                    //console.log(value)
                    var tempList = [];
                    this.usersTepm.forEach((item,index) =>{
                        if(item.user_name.indexOf(value) != -1){
                            tempList.push(item);
                        }
                    })
                    this.users = tempList;
                }else{
                    this.users = this.usersTepm;
                }
            },
            onClear(){
                this.users = this.usersTepm;
            }
        }
    };
</script>
